<%--注册页面--%>
<%--
  Created by IntelliJ IDEA.
  User: tangms
  Date: 2022/4/2
  Time: 8:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="script/jquery-3.3.1.js"></script>

        <script>
            window.onload=function (){
                var img = document.getElementById("img");
                img.onclick=function (){
                    img.src="checkCodeServlet?time="+new Date().getTime();
                }
                $("#change").onclick=function (){

                    $("#img").src="${pageContext.request.contextPath}/checkCodeServlet?time="+new Date().getTime();
                }
            }


            function checkUsename() {
                var usename = $("#usename").val();
                var reg_usename = /^[\u4e00-\u9fa5_a-zA-Z0-9]{1,9}$/
                var flag = reg_usename.test(usename);
                if(flag){
                    $("#usename").css("border","");
                    $("#_usename").html("");
                }
                else {
                    $("#usename").css("border","1px solid red");
                    $("#_usename").html("格式错误，请输入1到9位字符或数字！")
                    $("#_usename").css("color","red");
                }
                return flag;
            }
            function checkUsenameExit() {
                if (checkUsename()) {
                    var usename = $(this).val();
                     $.get("${pageContext.request.contextPath}/userServlet?action=userRegistByUsename", {usename: usename}, function (data) {
                        var span = $("#_usename");
                        if (data.login == true) {
                            span.css("color", "red");
                            span.html(data.msg);
                        } else {
                            span.css("color", "green");
                            span.html(data.msg);
                        }
                    }, "json");
                }
            }
                function checkPassword() {
                    var password = $("#password").val();
                    var reg_password = /^[A-Za-z0-9]{6,13}$/;
                    var flag = reg_password.test(password);
                    if (flag) {
                        $("#password").css("border", "");
                        $("#_password").html("")
                    } else {
                        $("#password").css("border", "1px solid red");
                        $("#_password").html("格式错误，请输入6到13位字符或数字！")
                        $("#_password").css("color", "red");
                    }
                    return flag;
                }
                //校验邮箱
                function checkEmail() {
                    var email = $("#email").val();
                    var reg_email = /^\w+@\w+\.\w+$/;
                    var flag = reg_email.test(email);
                    if (flag) {
                        $("#email").css("border", "");
                        $("#_email").html("")
                    } else {

                        $("#email").css("border", "1px solid red");
                        $("#_email").html("格式错误！请检查邮箱格式！")
                        $("#_email").css("color", "red");
                    }
                    return flag;
                }
                //校验电话号码
                function checkTelephone() {
                    var telephone = $("#telephone").val();
                    var reg_telephone = /^[0-9]{11}$/;
                    var flag = reg_telephone.test(telephone);
                    if (flag) {
                        //校验通过，用户名合法
                        $("#telephone").css("border", "");
                        $("#_telephone").html("")
                    } else {
                        $("#telephone").css("border", "1px solid red");
                        $("#_telephone").html("格式错误！请检查电话号码格式！")
                        $("#_telephone").css("color", "red");
                    }
                    return flag;
                }
                //校验年龄
                function checkAge() {
                    var age = $("#age").val();
                    //只能输入1到3位数字
                    var reg_age = /^[0-9]{1,3}$/;
                    var flag = reg_age.test(age);
                    if (flag) {
                        $("#age").css("border", "");
                        $("#_age").html("")
                    } else {
                        $("#age").css("border", "1px solid red");
                        $("#_age").html("请输入正确的年龄！")
                        $("#_age").css("color", "red");
                    }
                    return flag;
                }
                $(function () {
                    $("#registerForm").submit(function () {
                        var age = $("#age").val();
                        if (checkUsenameExit() && checkUsename() && checkPassword() && checkEmail() && checkTelephone() && checkAge()) {
                            location.href = "${pageContext.request.contextPath}/userServlet?action=regist";
                        }
                        ;
                    })
                    $("#usename").blur(checkUsename);
                    $("#usename").blur(checkUsenameExit);
                    $("#password").blur(checkPassword);
                    $("#email").blur(checkEmail);
                    $("#telephone").blur(checkTelephone);
                    $("#age").blur(checkAge);
                })
         </script>

</head>
<style>
    /**{*/
    /*    margin: 0px;*/
    /*    padding: 0px;*/
    /*    box-sizing: border-box;*/
    /*}*/
    .rg_layout{
        width: 900px;
        height:900px;
        border: 8px;
        background-color: white;
        margin: auto;
        padding: 15px;
        margin-top: 15px;
    }

    .rg_up{
        /*border: 1px solid red;*/
        border: 1px;
        float: left;
        margin-top: 125px;
        margin-bottom: 2px;
    }
    .rg_center{
        /*border: 1px red;*/
        border: 1px;
        width:900px ;
        /*height:*/
        /*float:left;*/
    }
    .rg_bottom{
        border: 1px;
        margin-top: 2px;
        float: right;
    }
    .p_reg{
        color: blue;
        font-size: 20px;
    }
    .p_reg2{
        color: grey;
        font-size: 15px;
    }
    .p_re3{
        font-size: 10px;
    }
    .p_re4{

    }

    .td_up{
        width: 80px;
        text-align: right;
        height: 40px;
    }
    .td_bottom{
        padding-left: 30px;
    }

    #usename,#password,#email,#name,#telephone,#age{
        width: 290px;
        height: 32px;
        border: 1px solid #A6A6A6;
        /*设置边框圆角*/
        border-radius: 5px;
        padding-left: 10px;
    }
    #btn_sub{
        width: 100px;
        height: 30px;
        background-color:lightskyblue;
        align-content: center;
        border: 1px solid lightskyblue;
    }
</style>
<body>
<div class="rg_layout">
    <div class="rg_up">
        <p class="p_reg">新用户注册</p>
        <p class="p_reg2">USER REGISTER</p>
        <br>
    </div>
    <div class="rg_center">
        <div class="rg_form">
            <!--定义表单form-->
            <form action="${pageContext.request.contextPath}/userServlet" method="post">
<input type="hidden" name="action" value="regist">
                <table>
                    <tr>
                        <td class="td_up"><label for="usename">用户名</label></td>
                        <td class="td_bottom"><input type="text" name="usename" id="usename" placeholder="请输入用户名"></td>
                        <td id="_usename"></td>
                    </tr>
                    <tr>
                        <td class="td_up"><label for="password">密码</label></td>
                        <td class="td_bottom"><input type="password" name="password" id="password" placeholder="请输入密码"></td>
                        <td id="_password"></td>
                    </tr>
                    <tr>
                        <td class="td_up"><label for="email">邮箱</label></td>
                        <td class="td_bottom"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
                        <br>
                        <td id="_email"></td>
                    </tr>
                    <tr>
                        <td class="td_up"><label for="telephone">手机号</label></td>
                        <td class="td_bottom"><input type="text" name="telephone" id="telephone" placeholder="请输入手机号"></td>
                        <td id="_telephone"></td>
                    </tr>
                    <tr>
                        <td class="td_up"><label for="age">年龄</label></td>
                        <td class="td_bottom"><input type="text" name="age" id="age" placeholder="请输入年龄"></td>
                        <td id="_age"></td>
                    </tr>
                    <tr>
                        <td class="td_up"><label >性别</label></td>
                        <td class="td_bottom"><input type="radio" name="gender" value="男"> 男
                            <input type="radio" name="gender" value="女" checked placeholder="请选择性别"> 女</td>
                    </tr>

                    <tr>
                        <td>验证码</td>
                        <td><input type="text" name="checkCode" id="checkCode"></td>
                    </tr>
                    <br>
                    <tr>
                        <img id="img" src="image/checkCode.jpg" width="100" height="50">
                        <%--                    <a id="change" herf="">换一张</a>--%>
                    </tr>

                    <tr>
                        <td colspan="2" align="center"><input type="submit" id="btn_sub" value="注册"></td>
                    </tr><br>
                    <span id="regist"></span>
                </table>
            </form>
        </div>
    </div>
    <br>
    <div class="rg_bottom">
        <p class="p_re3">已有账号?<a href="${pageContext.request.contextPath}/login.jsp" class="p_re4">立即登录</a></p>
    </div>
</div>
</body>
</html>
